<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <script>
        window.onload = function () {
            var app = new Vue({
                el: '#app-4',
                methods: {
                    reverseMessage: function () {
                        this.message = this.message.split('').reverse().join('')
                    },

                    addpeople: function () {
                        this.peoples.push({name:this.username , age: this.age});
                    },
                    removeall:function () {
                        this.peoples=[];
                    },
                    remove:function(index){
                        this.peoples.splice(index);
                    }

                },


                data: {
                    username:'',
                    age:0,
                    message: 'Hello Vue.js!',
                    peoples: [
                        {name: 'wjb', age: 18,time:new Date()},
                        {name: 'wch', age: 58,time:new Date()},
                    ]
                }
            })

        }
    </script>


</head>
<body>
<div id="app-4">
    <p>{{ message }}</p>
    <input v-model="username">
    <input v-model="age">
    <button v-on:click="addpeople">添加</button>
    <button v-on:click="removeall">删除所有</button>

    <table border="1">
        <tr>
            <th>序号</th>
            <th>名字</th>
            <th>年龄</th>
            <th>时间</th>
            <th>操作</th>
        </tr>
        <tr v-for="people in peoples">
            <td>{{index+1}}</td>
            <td>{{people.name}}</td>
            <td>{{people.age}}</td>
            <td>{{people.time|hhmmss}}</td>
            <td><button v-on:click="remove(index)">删除</button></td>
        </tr>
    </table>
</div>
</body>
</html>